<template>
  <div class="device-management">
    <!-- 添加地区 -->
    <div class="add-address-container">
      <input type="button" value="添加地区" @click="add_address()">
      <div v-show="add_show" class="add-address-form">
        <input type="text" ref="address" placeholder="输入地区">
        <div class="add-buttons">
          <input type="button" value="确定" @click="add_ad()">
          <input type="button" value="取消" @click="add_ad_quit()">
        </div>
      </div>
    </div>
    <!-- 设备列表-->
    <div class="content-device" v-if="page_fresh">
      <ManagementTab class="management-tab" v-for="(item, index) in tabs" :key="index" :address="item"></ManagementTab>
    </div>
  </div>
</template>

<script>
import request from '@/api/request'
import ManagementTab from '../components/management_tab.vue'

export default {
  created() {
    this.getMessage()
  },
  components: {
    ManagementTab
  },
  data() {
    return {
      tabs: null,
      add_show: false,
      page_fresh: true
    }
  },
  methods: {
    add_address() {
      this.add_show = !this.add_show
    },
    add_ad_ex() {
      const address = this.$refs.address.value;
      request.get('http://localhost:5000/address/add?address_name=' + address).then(function (response) {
        if (response.data === 'True') {
          alert("新增成功")
        }
      }.bind(this))
      this.add_show = false
    },
    add_ad() {
      this.add_ad_ex()

      setTimeout(() => {
        this.page_fresh = false
        this.$nextTick(() => {
          this.getMessage()
          console.log(this.tabs)
          this.page_fresh = true
        })
      }, 1000)

    },
    add_ad_quit() {
      this.add_show = false
    },
    getMessage() {
      request.get('http://localhost:5000/address/select').then(function (response) {
        this.tabs = response.data
      }.bind(this))
    }
  }
}
</script>

<style scoped>
/* 添加地区按钮样式 */
input[type="button"] {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 10px;
}

/* 添加地区区域样式 */
.add-address-container {
  margin: 20px 0;
}

/* 输入框样式 */
input[type="text"] {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

/* 确定和取消按钮样式 */
.add-buttons input[type="button"] {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

/* 地区标签样式 */
.management-tab {
  background-color: #f2f2f2;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
}

.device-management {
  width: 100%;
}

.content-device {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 50px;
  border-radius: 10px;
}
</style>
